﻿<template>
  <div class="attribute-container">
    <!-- <header class="attribute-head">
      <el-button type="primary" @click="handleShowAdd">新增配件</el-button>
    </header> -->
    <!-- 新增配件 -->
    <div class="attribute-card" v-if="showAdd">
      <div class="attribute-card-head">
        <div class="attribute-head-left input-none">
          <el-input
            style="width: 700px"
            placeholder="请输入配件名称"
            v-model="addContent.componentName"
            :maxlength="20"
          />
        </div>
        <div class="attribute-head-right">
          <el-button type="primary" link @click="handleCancleNewAttr">取消</el-button>
          <el-button type="primary" link @click="handleSaveNewAttr">保存</el-button>
        </div>
      </div>
      <div class="attribute-tag-list">
        <div v-for="(tag, tagIdx) in addContent.children" :key="tagIdx" class="attribute-tag-list-item">
          <el-input
            v-if="tag.tagEdit"
            v-model="tag.componentName"
            :autofocus="true"
            :maxlength="20"
            ref="childrenInputRef"
            @keyup.enter="handleEditChildren(tagIdx)"
            @blur="handleEditChildren(tagIdx)"
          />
          <el-tag
            size="large"
            closable
            v-else
            @click="handleOpenChildrenEdit(tagIdx)"
            @close="handleDelNewAttr(tagIdx)"
          >
            {{ tag.componentName }}
          </el-tag>
        </div>
        <!-- 添加标签按钮 -->
        <div class="tag-add">
          <el-input
            v-if="addContent.tagInputShow"
            v-model="newAttr"
            :autofocus="true"
            :maxlength="20"
            ref="childrenTagInputRef"
            @keyup.enter="handleAddNewChildren"
            @blur="handleAddNewChildren"
          />
          <el-button v-else @click="handleShowAddInput"> + 添加配件 </el-button>
        </div>
      </div>
    </div>
    <!-- 配件列表 -->
    <div v-loading="loading">
      <div class="attribute-card" v-for="(item, index) in attrList" :key="item.id">
        <div class="attribute-card-head">
          <div class="attribute-head-left input-none">
            <el-input
              v-if="item.isEdit"
              v-model="item.componentName"
              style="width: 240px"
              placeholder="请输入配件名称"
              :key="item.id"
              :maxlength="20"
              ref="attrListTitleRef"
            />
            <span v-else>{{ item.componentName }}</span>
          </div>
          <div class="attribute-head-right">
            <el-button type="primary" link v-if="!item.isEdit" @click="handleEdit('edit', index)">编辑</el-button>
            <el-button type="primary" link v-if="item.isEdit" @click="handleEdit('cancle', index)">取消</el-button>
            <el-button type="primary" link v-if="item.isEdit" @click="handleEdit('save', index, item)">保存</el-button>
          </div>
        </div>
        <div class="attribute-tag-list">
          <div v-for="(tag, tagIdx) in item.children" :key="tagIdx" class="attribute-tag-list-item">
            <el-input v-if="item.isEdit" v-model="tag.componentName" style="width: 100px" />
            <el-tag closable size="large" v-else @close="showDelConfirm(index, tagIdx, item)">
              {{ tag.componentName }}
            </el-tag>
          </div>
          <!-- 添加标签按钮 -->
          <div class="tag-add" v-if="!item.isEdit">
            <el-input
              v-if="item.tagInputShow"
              v-model="inputValue"
              :autofocus="true"
              :maxlength="20"
              ref="addTagInput"
              @keyup.enter="handleInputConfirm(index, item)"
              @blur="handleInputConfirm(index, item)"
            />
            <el-button v-else @click="showInput(index)"> + 添加配件 </el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 删除确认 -->
    <base-dialog
      title="提示"
      :width="400"
      :show-footer="true"
      @close="handelHide"
      @cancel="handelHide"
      @confirm="handleDelTag"
      v-model="delModalShow"
      >确定删除该配件吗？
    </base-dialog>
  </div>
</template>

<script setup>
  // 当前选择内容
  const currentType = ref("");
  // 属性列表
  const attrList = ref([]);
  // 左侧下拉列表数据
  const selectList = ref([]);
  // 标题ref
  const attrListTitleRef = ref();
  // 列表加载
  const loading = ref(false);
  // 尾部ref
  const addTagInput = ref();
  // 子选项输入框内容
  const inputValue = ref("");
  // 新增属性内容
  const addContent = ref({
    componentName: "",
    tagInputShow: false,
    children: [],
  });
  // 新增输入框内容
  const newAttr = ref("");
  // 新增-子属性输入框
  const childrenInputRef = ref();
  // 新增-尾部添加按钮
  const childrenTagInputRef = ref();
  // 新增模块显示隐藏
  const showAdd = ref(false);
  // 删除确认框显示
  const delModalShow = ref(false);
  // 需要删除的参数数据
  const delParams = ref({});
  // 初始化
  onMounted(() => {
    loadAttributeList(true);
  });
  // 获取数据
  const loadAttributeList = init => {
    loading.value = true;
    Api.product.getAccessoriesList({ id: currentType.value == 0 ? "" : currentType.value }).then(res => {
      loading.value = false;
      const data = res.data.map(item => {
        const childrenList = [];
        item?.children?.forEach(el => {
          const newEl = { ...el };
          el["tagEdit"] = false;
          childrenList.push(newEl);
        });
        return {
          ...item,
          isEdit: false,
          tagInputShow: false,
          children: childrenList,
        };
      });
      if (init) {
        selectList.value = data;
      }
      attrList.value = data;
    });
  };
  // 筛选切换
  const changeType = () => {
    console.warn(currentType.value);
    loadAttributeList();
  };
  // 新增-显示新增模块
  const handleShowAdd = () => {
    if (showAdd.value) {
      return;
    }
    showAdd.value = true;
  };
  // 新增-显示新增子属性输入框
  const handleShowAddInput = () => {
    addContent.value.tagInputShow = true;
    nextTick(() => {
      childrenTagInputRef.value.input.focus();
    });
  };
  // 新增-子属性输入框失去焦点或者回车
  const handleAddNewChildren = () => {
    if (newAttr.value) {
      const newItem = { tagInputShow: false, componentName: newAttr.value, tagEdit: false };
      addContent.value.children.push(newItem);
    }
    newAttr.value = "";
    addContent.value.tagInputShow = false;
  };
  // 新增-开启子属性编辑
  const handleOpenChildrenEdit = idx => {
    addContent.value.children[idx].tagEdit = true;
    nextTick(() => {
      childrenInputRef.value[idx].input.focus();
    });
  };
  // 新增-关闭子属性编辑并保存
  const handleEditChildren = idx => {
    addContent.value.children[idx].tagEdit = false;
  };
  // 新增-保存新增属性
  const handleSaveNewAttr = () => {
    if (!addContent.value.componentName) {
      $msg.warning("请输入属性名称");
      return;
    }
    const addParams = {
      source: "02",
      parentId: 0,
      componentName: addContent.value.componentName,
      children: addContent.value.children.map(el => {
        return { componentName: el.componentName, source: "02" };
      }),
    };
    Api.product.addAccessories(addParams).then(() => {
      handleCancleNewAttr();
      $msg.success("新增成功");
      loadAttributeList(true);
    });
  };
  // 新增-取消保存新增属性
  const handleCancleNewAttr = () => {
    showAdd.value = false;
    addContent.value = { componentName: "", tagInputShow: false, tagList: [] };
  };
  // 新增-删除已添加属性
  const handleDelNewAttr = idx => {
    addContent.value.children.splice(idx, 1);
  };
  // 编辑-显示添加输入框
  const showInput = idx => {
    attrList.value[idx].tagInputShow = true;
    nextTick(() => {
      addTagInput.value[0].input.focus();
    });
  };
  // 编辑-添加属性
  const handleInputConfirm = (idx, info) => {
    // tag 输入框有值
    if (inputValue.value) {
      const newItem = { componentName: inputValue.value, tagEdit: false };
      attrList.value[idx].children.push(newItem);
      nextTick(() => {
        handleConfirmEdit(info);
      });
    }
    // 隐藏输入框
    attrList.value[idx].tagInputShow = false;
    // 清空
    inputValue.value = "";
  };
  // 编辑-已有属性开启编辑
  const handleEdit = (actionType, idx, info) => {
    if (actionType == "edit") {
      // 设置当前编辑开关
      const attrData = attrList.value.map((item, index) => {
        if (index == idx) {
          // 开启当前
          item.isEdit = true;
        } else {
          // 关闭其他
          item.isEdit = false;
        }
        return item;
      });
      attrList.value = attrData;
      nextTick(() => {
        console.warn(attrListTitleRef.value);
        attrListTitleRef.value[0].input.focus();
      });
    } else if (actionType === "save") {
      // 保存
      handleConfirmEdit(info);
    } else {
      attrList.value[idx].isEdit = false;
    }
  };
  // 编辑-删除确认
  const showDelConfirm = (parentIdx, tagIdx, info) => {
    delParams.value = { parentIdx, tagIdx, info };
    delModalShow.value = true;
  };
  // 编辑-关闭弹窗
  const handelHide = () => {
    delParams.value = {};
    delModalShow.value = false;
  };
  // 编辑-删除属性
  const handleDelTag = () => {
    const delInfo = delParams.value;
    handelHide();
    attrList.value[delInfo.parentIdx].children.splice(delInfo.tagIdx, 1);
    nextTick(() => {
      handleConfirmEdit(delInfo.info);
    });
  };
  // 确认编辑
  const handleConfirmEdit = info => {
    const { id, parentId, children, componentName } = info;
    const params = {
      id,
      parentId,
      componentName,
      source: "02",
      children: children.map(el => {
        return { ...el, source: "02" };
      }),
    };
    Api.product.editAccessories(params).then(() => {
      $msg.success("修改成功");
      loadAttributeList();
    });
  };
</script>

<style lang="scss" scoped>
  .attribute-container {
    padding: 16px;
    .attribute-head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
    }
    .attribute-card {
      padding: 24px;
      background-color: #fff;
      margin-bottom: 16px;
      border-radius: 12px;
      .attribute-card-head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px dashed var(--cb1);
        margin-bottom: 16px;
        .attribute-head-left {
          font-size: 16px;
          font-weight: bold;
          color: var(--ct1);
        }
      }
      .attribute-tag-list {
        margin-top: 16px;
        display: flex;
        flex-wrap: wrap;
        .attribute-tag-list-item {
          margin-right: 10px;
          margin-bottom: 10px;
        }
        .tag-add {
          width: 120px;
        }
      }
    }
  }
  .input-none {
    :deep(.el-input__wrapper) {
      box-shadow: none;
      cursor: default;
      // .el-input__inner {
      //   cursor: default !important;
      // }
    }
  }
</style>
